<template>
  <div>
    <div v-if="roleId != 3" style="text-align: center">
      <div>
        <h1 class="title" style="color: green; margin-top: 250px">
          你好，欢迎使用本系统！
        </h1>
      </div>
    </div>
    <div v-if="roleId == 3">
      <el-row :gutter="24" class="mgb20">
        <el-col :span="4" :offset="2">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <i class="el-icon-school grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ schoolCount }}</div>
                <div>教育单位</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-3">
              <i class="el-icon-lx-group grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ userCount }}</div>
                <div>用户数量</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-2">
              <i class="el-icon-data-line grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ visitCount }}</div>
                <div>系统访问量</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-3">
              <i class="el-icon-chat-dot-square grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ jobCount }}</div>
                <div>招聘信息</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <i class="el-icon-s-custom grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ adminCount }}</div>
                <div>管理员</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!--         <el-col :span="4">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-3">
              <i class="el-icon-lx-goods grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ onlineCount }}</div>
                <div>在线用户</div>
              </div>
            </div>
          </el-card>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <div id="main" style="width: 600px; height: 300px"></div>
        </el-col>
        <el-col :span="10" :offset="2">
          <div id="pie1" style="width: 400px; height: 300px"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div id="pie2" style="width: 600px; height: 300px"></div>
        </el-col>
        <el-col :span="12">
          <div id="chart5" style="width: 600px; height: 300px"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAnalyze } from "../../api/admin.js";
import Schart from "vue-schart";
import bus from "../common/bus";
export default {
  created() {},
  name: "dashboard",
  data() {
    return {
      onlineCount: 0,
      visitCount: 0,
      userCount: 0,
      adminCount: 0,
      schoolCount: 0,
      jobCount: 0,
      roleId: localStorage.getItem("roleId"),
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("main"));
    var myChart1 = this.$echarts.init(document.getElementById("pie1"));
    var myChart2 = this.$echarts.init(document.getElementById("pie2"));

    var option = {
      title: {
        text: "系统访问趋势 单位:个",
        left: "center",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          data: [],
          type: "line",
          areaStyle: {},
        },
      ],
    };
    var option1 = {
      title: {
        text: "用户性别比例",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    var option2 = {
      title: {
        text: "签约工作薪资分布 单位:个",
        left: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["5k", "10K", "15K", "20K", "25K+"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [],
        },
      ],
    };
    var chart5 = this.$echarts.init(document.getElementById("chart5"), "macarons");
    var mapOption = {
      backgroundColor: "#FFFFFF",
      title: {
        text: "意向工作城市",
        x: "center",
      },
      tooltip: {
        trigger: "item",
      },

      //左侧小导航图标
      visualMap: {
        show: true,
        x: "left",
        y: "left",
        splitList: [
          { start: 500, end: 600 },
          { start: 400, end: 500 },
          { start: 300, end: 400 },
          { start: 200, end: 300 },
          { start: 100, end: 200 },
          { start: 0, end: 100 },
        ],
        color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea"],
      },

      //配置属性
      series: [
        {
          name: "人数:",
          type: "map",
          mapType: "china",
          roam: true,
          label: {
            normal: {
              show: true, //省份名称
            },
            emphasis: {
              show: false,
            },
          },
          data: [], //数据
        },
      ],
    };
    getAnalyze()
      .then((result) => {
        if ((result.status = "200")) {
          this.onlineCount = result.data.onlineCount;
          this.visitCount = result.data.visitCount;
          this.userCount = result.data.userCount;
          this.adminCount = result.data.adminCount;
          this.schoolCount = result.data.schoolCount;
          this.jobCount = result.data.jobCount;
          var dataList = result.data.visitTrend;
          dataList.forEach((element) => {
            option.xAxis.data.unshift(element.name);
            option.series[0].data.unshift(element.value);
          });
          option1.series[0].data = result.data.sexData;
          result.data.salary.forEach((element) => {
            option2.series[0].data.push(element.value);
          });
          mapOption.series[0].data = result.data.cityData;
          chart5.setOption(mapOption);
          myChart.setOption(option);
          myChart1.setOption(option1);
          myChart2.setOption(option2);
        }
      })
      .catch((err) => {});
  },
  components: {
    Schart,
  },
  methods: {
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      });
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
